<template>
  <el-tag v-if="value === c1Value" :type="c1Type" disable-transitions>{{ c1Text }}</el-tag>
  <el-tag v-else-if="value === c2Value" :type="c2Type" disable-transitions>{{ c2Text }}</el-tag>
  <el-tag v-else-if="value === c3Value" :type="c3Type" disable-transitions>{{ c3Text }}</el-tag>
  <span v-else>{{ value }}</span>
</template>

<script>
export default {
  name: 'YesNoTag',
  props: {
    value: {
      type: [String, undefined],
      required: true
    },
    c1Value: {
      type: String,
      required: true
    },
    c1Text: {
      type: String,
      required: true
    },
    c2Value: {
      type: String,
      required: true
    },
    c2Text: {
      type: String,
      required: true
    },
    c3Value: {
      type: String,
      required: true
    },
    c3Text: {
      type: String,
      required: true
    },
    c1Type: {
      type: String,
      required: false,
      default: () => 'success'
    },
    c2Type: {
      type: String,
      required: false,
      default: () => 'warning'
    },
    c3Type: {
      type: String,
      required: false,
      default: () => 'danger'
    }
  }
}
</script>
